<template>
  <div>
    <el-card class="header-card">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-input v-model="searchFormData.KeyName" placeholder="请输入关键字查询" style="width: 70%"
                        suffix-icon="el-icon-search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-row>
              <el-col :span="9">
                <el-form-item label="工序:">
                  <ASelect v-model="searchFormData.TechId === 0 ? '' : searchFormData.TechId" :label-attr-name="'Name'"
                           :options="workStage"
                           :val-attr-name="'TechId'" :value.sync="searchFormData.TechId"
                  ></ASelect>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="商户名:">
                  <ASelect v-model="searchFormData.ShopId" :label-attr-name="'Name'" :loading="loading" :options="shopNames"
                           :remote-method="getShopName"
                           :val-attr-name="'ShopId'" :value.sync="searchFormData.ShopId" filterable
                           remote
                  ></ASelect>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="8">
            <el-form-item label="单号:">
              <el-input v-model="searchFormData.netOrderId" placeholder="请输入单号" style="width: 70%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="开单时间:">
              <el-date-picker
                v-model="dateTime"
                :picker-options="pickerOptions"
                align="right"
                end-placeholder="结束日期"
                range-separator="-"
                start-placeholder="开始日期"
                style="width: 92.5%"
                type="daterange"
                unlink-panels
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="operator-button">
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="getData">查询</el-button>
              <ExportFileButton :column-des-objs="exportColumnDesObjs" @export="exportData">
                <el-button icon="el-icon-download" type="success">导出</el-button>
              </ExportFileButton>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="data-table">
      <AzureDynamicTable :column-des-objs="columnDesObjs" :data="tableData" :show-seq="true">
        <template slot="operator" slot-scope="{scope:{row}}">
          <el-tag :type="row['opStatus'] === 0 ? 'danger' : 'success'">{{ row['DisplayOpStatus'] }}</el-tag>
        </template>
      </AzureDynamicTable>
    </el-card>

    <el-card class="pagination-footer">
      <Pagination v-show="total>0" :limit.sync="PageSize" :page-sizes="PageSizes" :page.sync="PageIndex"
                  :total="total"
                  class="pagination" @pagination="getData"></Pagination>


    </el-card>
  </div>
</template>

<script>
import ASelect from '@/components/ATheFridayClub/ASelect'
import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
import {GetShops, GetTechForFactory, GetTechOrderProductDoing} from '@/api/productionStat'
import {ERR_OK} from '@/utils/commons'
import Pagination from '@/components/ATheFridayClub/Pagination'
import moment from 'moment'
import ExportFileButton from '@/components/ATheFridayClub/export/ExportFileButton.vue'

export default {
  name: 'productionStat',
  components: {ASelect, AzureDynamicTable, Pagination, ExportFileButton},
  data() {
    return {
      tableData: [],
      columnDesObjs: [
        {label: '商户名', key: 'ShopName', width: 230},
        {label: '单号', key: 'NetOrderId', width: 170},
        {label: '客户名', key: 'CtmName', width: 230},
        {label: '产品号', key: 'ProductCode', width: 140},
        {label: '产品名', key: 'ProductName', width: 240},

        {label: '规格', key: 'ProductSize', width: 140},

        {label: '组件号', key: 'ProductPartCode', width: 140, tag: true},
        {label: '组件名称', key: 'ProductPartName', width: 200, tag: true},

        {label: 'P数', key: 'FileNum', width: 140},
        {label: '面积', key: 'photoArea', width: 140},
        {label: '开单时间', key: 'ordertime', dateFormat: true, width: 230},
        {label: '完成时间', key: 'CompletedTime', dateFormat: true, width: 230},
        {label: '工序', key: 'TechName', width: 140},
        {label: '进度', key: 'operator', width: 140}
      ],
      PageIndex: 1,
      PageSize: 10,
      PageSizes: [10, 50, 100, 200],
      total: '',
      dateTime: [moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 3)).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
      searchFormData: {
        ShopId: '',
        TechId: 0,
        netOrderId: '',
        StOrderTime: '',
        EndOrderTime: '',
        KeyName: '',
      },
      loading: false,
      workStage: [],
      shopNames: [],
      tagStatus: 'primary',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  async created() {
    await this.getData()
    await this.getTechFactory()
  },
  computed: {
    exportColumnDesObjs() {
      const columnDesObjs = [...this.columnDesObjs]
      columnDesObjs.pop()
      columnDesObjs.push({label: '进度', key: 'DisplayOpStatus', width: 230})
      return columnDesObjs
    }
  },
  methods: {
    async exportData({resolve, reject}) {
      try {
        resolve(await this.getData({PageIndex: 1, PageSize: 10000000, isExport: true}))
      } catch (e) {
        reject(e)
      }
    },
    async getData({PageIndex = this.PageIndex, PageSize = this.PageSize, isExport = false} = {}) {
      try {
        this.searchFormData.StOrderTime = this.dateTime[0]
        this.searchFormData.EndOrderTime = this.dateTime[1]
        const {Code, Result} = await GetTechOrderProductDoing({PageIndex, PageSize, ...this.searchFormData})
        if (Code === ERR_OK) {
          const {Items, TotalNum, CurrentPage} = Result
          if (isExport) {
            return Items
          }
          this.tableData = Items
          this.PageIndex = CurrentPage
          this.total = TotalNum
        }
      } catch (e) {
        console.error(e)
        throw e
      }
    },
    async getTechFactory() {
      const {Code, Result} = await GetTechForFactory()
      if (Code === ERR_OK) {
        this.workStage = Result
      }
    },
    async getShopName(query) {
      if (query !== '') {
        console.log(query, 206)
        this.loading = true;
        const {Result, Code} = await GetShops({inKey: query})
        if (Code === ERR_OK) {
          const {Items} = Result
          this.shopNames = Items
          this.loading = false;
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-card {
  margin: 12px 12px 12px 12px;
}

.data-table {
  margin: 12px 12px 12px 12px;
}

.pagination-footer {
  margin: 12px 12px 12px 12px;

  .pagination {
    padding-top: 0;
  }
}

</style>
